<template>
	<view>
	<view class="product-container" v-for="(product,idx) in productList" :key="idx">
		<view class="product-title">
			<text :style="{color:titleColors[idx]}">—— {{product.title}} ——</text>
		</view>
		<view class="product-main">
	
			<block v-if="product.items.length%2!=0">
				<view class="product-main-1" v-for="(item,index) in product.items" :key="index" v-if="index==0">
					<view class="product-main-1-1">
						<view class="product-main-1-1-1">
							{{item.title}}
						</view>
						<view class="product-main-1-1-2">
							<view>精品打折</view>
							<view class="btn">
								{{item.price}}
							</view>
						</view>
						<view class="product-main-1-1-3">
							<image :src="`http:${item.image}`" mode=""></image>
						</view>
					</view>
					<view class="product-main-1-2" v-for="(item,index) in  product.items" :key="index"
						v-if="index==1||index==2">
						<view class="product-main-1-2-1">
							<view class="product-main-1-2-1-top">
								{{item.title}}
							</view>
							<view class="product-main-1-2-1-bottom">
								品质精挑
							</view>
						</view>
						<view class="product-main-1-2-2">
							<image :src="`http:${item.image}`"></image>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="event-box">
					<view class="event-item" v-for="(item,index) in product.items" :key="index" v-if="index<2">
						<view class="event-item-1">
							{{item.title}}
						</view>
						<view class="event-item-2">
							火爆开售
						</view>
						<view class="event-item-3">
							<image :src="`http:${item.image}`" mode=""></image>
						</view>
					</view>
				</view>
			</block>
	
	
			<view class="product-main-2">
				<!-- 如果要调用一个数组中相关方法，严格期间要先判断该数组是存在的，如果数组都不存在 -->
				<block v-if="product.items">
					<view class="product-main-2-item" v-for="(item,index) in product.items.slice(-4)" :key="index">
						<view class="product-main-2-item-1">
							{{item.title}}
						</view>
						<view class="product-main-2-item-2">
							<image :src="`http:${item.image}`" mode=""></image>
						</view>
						<view class="product-main-2-item-3">
							{{item.price|RMB}}
						</view>
						<view class="product-main-2-item-4">
							{{item.price*2|RMB}}
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props:{
			productList:{
				type:Array
			},
			titleColors:{
				type:Array
			}
		},
		name:"home-product",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.product-container {
			width: 750rpx;

			@include flex-box(center, start, column) .product-title {
				width: 100%;
				height: 65rpx;
				background-color: #fff;
				color: #F73B61;
				@include flex-box(center, center, row)
			}

			.product-main {
				@include flex-box(center, start, column) padding: 10rpx;
				font-size: 30rpx;

				.event-box {
					@include flex-box(center, center, row) width: 750rpx;
					height: 350rpx;

					.event-item {
						@include flex-box(center,center,column)
						padding: 10rpx;
						flex-grow: 1;
						height: 100%;
						.event-item-1{
							@include flex-ellipsis(1)
						}
						.event-item-2{
							color: #ccc;
						}
						.event-item-3{
						
							image{
								width: 180rpx;
								height: 200rpx;
							}
						}
					}
				}



				.product-main-1 {
					width: 750rpx;
					height: 350rpx;

					.product-main-1-1 {
						box-sizing: border-box;
						width: 375rpx;
						height: 350rpx;
						border-right: 1rpx solid #f5f5f5;
						float: left;
						padding: 0 10rpx;

						.product-main-1-1-1 {
							@include flex-ellipsis(1)
						}

						.product-main-1-1-2 {
							@include flex-box(between, start, row) .btn {
								width: 80rpx;
								height: 40rpx;
								background-color: #F21D4F;
								padding: 5rpx 10rpx;
								color: #fff;
								border-radius: 20rpx;
							}
						}

						.product-main-1-1-3 {
							image {
								width: 300rpx;
								height: 200rpx;
							}
						}
					}

					.product-main-1-2 {
						@include flex-box(center, start, row) padding: 0 10rpx;
						box-sizing: border-box;
						width: 375rpx;
						height: 175rpx;
						float: left;

						.product-main-1-2-1 {
							.product-main-1-2-1-top {
								@include flex-ellipsis(1)
							}
						}

						.product-main-1-2-2 {
							image {
								width: 120rpx;
								height: 120rpx;
							}
						}
					}
				}

				.product-main-2 {
					@include flex-box(center, start, row) width: 750rpx;
					height: 320rpx;

					.product-main-2-item {
						box-sizing: border-box;
						@include flex-box(center, center, column) flex-grow: 1;
						border-right: 1rpx solid #f5f5f5;
						height: 100%;

						.product-main-2-item-1 {
							@include flex-ellipsis(1)
						}

						.product-main-2-item-2 {
							image {
								width: 150rpx;
								height: 150rpx;
							}
						}

						.product-main-2-item-3 {
							color: $shop-price-color;
						}

						.product-main-2-item-4 {
							text-decoration: line-through;
							color: #999;
						}
					}
				}
			}
		}
</style>